<template>
	<div class="container">
		<el-table :data="tableDataFn" border style="width: 100%" stripe :fit="true">
			<el-table-column type="index" width="50" label="序号"> </el-table-column>
			<template v-for="item in tableColumns">
				<el-table-column :prop="item.prop" :label="item.label" align="center" v-if="item.isShow"
					:sortable="item.sortable" :key="item.prop">
					<template v-slot="scope">
						<slot :scope="scope" :item="item"></slot>
					</template>
				</el-table-column>
			</template>
		</el-table>
		<!-- <v-pagination
      :dataTotal="dataTotal"
      :curPage="postData.curPage"
      :pageSize="postData.pageSize"
      @getCurPage="getPaginationCurPage"
      @getPageSize="getPaginationPageSize"
    >
    </v-pagination> -->
		<v-pagination :total="dataTotal" :curPage="postData.curPage" :pageSize="postData.pageSize"
			@getCurPage="getPaginationCurPage" @getPageSize="getPaginationPageSize">
		</v-pagination>
	</div>
</template>

<script>
	// import vPagination from "common/Pagination.vue";
	import vPagination from './DataBasePagination.vue'

	export default {
		name: "dbBackup",
		components: {
			vPagination,
		},
		props: ["tableData", "tableColumns"],
		data() {
			return {
				postData: {
					curPage: 1,
					pageSize: 10,
				},
				dataTotal: 0,
				tableDataFn: [],
			};
		},
		created() {
			this.getTableData()
		},
		methods: {
			getTableData() {
				this.dataTotal = this.tableData.length;
				this.tableDataFn = this.tableData.slice(
					(this.postData.curPage - 1) * this.postData.pageSize,
					this.postData.curPage * this.postData.pageSize
				);
			},
			getPaginationCurPage(val) {
				this.postData.curPage = val;
				this.getTableData();
			},
			getPaginationPageSize(val) {
				// 分页大小改变之后，重置当前页码为 1
				this.postData.curPage = 1;
				this.postData.pageSize = val;

				this.getTableData();
			},
		}
	};
</script>

<style scoped>
	.el-table .warning-row {
		background: oldlace;
	}

	.el-table .success-row {
		background: #f0f9eb;
	}
</style>
